<div class="wrapper">
    <span>服务器状态监控</span>
    <a ng-click="refresh()">刷新</a>
</div>
<div class="wrapper-md">
    <div class="row">
        <div class="col-md-5">
            <div class="row row-sm text-center">
            <div class="col-xs-4" >
                    <div class="panel padder-v item">
                        <div>
                            <span class="h1 text-info font-thin">{{counter[0]}}</span></div>
                        <span class="text-xs">已经报名总人数</span>
                    </div>
                </div>
                <div class="col-xs-4" >
                    <div class="panel padder-v item">
                        <div>
                            <span class="h1 text-info font-thin">{{counter[1]}}</span></div>
                        <span class="text-xs">已经报名总人数</span>
                    </div>
                </div>
                <div class="col-xs-4" >
                    <div class="panel padder-v item">
                        <div>
                            <span class="h1 text-info font-thin">{{counter[3]}}/{{counter[2]}}</span></div>
                        <span class="text-xs">【艺术类】未缴费/总人数</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="panel">
                <div class="panel-heading no-border bg-dark Iter">
                    <span class="font-bold">Server</span>
                </div>
                <div class="hbox">
                    <div class="col wrapper">
                        <span>Uptime</span>
                        <div class="h1 text-info">
                            {{metrics['instance.uptime']/1000/3600 | number:1}}小时
                        </div>
                    </div>
                    <div class="col wrapper">
                        <span>Status</span>
                        <div class="h1" ng-class="{'text-success':health.status == 'UP'}">
                            {{health?health.status:'DOWN'}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4" ng-if="health">
            <div class="panel">
                <div class="panel-heading no-border bg-dark Iter">
                    <span class="font-bold">DB</span>
                </div>
                <div class="hbox">
                    <div class="col wrapper">
                        <span>Name</span>
                        <div class="h1 text-info">
                            {{health.db.database}}
                        </div>
                    </div>
                    <div class="col wrapper">
                        <span>Status</span>
                        <div class="h1 text-info" ng-class="{'text-success':health.status == 'UP'}">
                            {{health.db.status}}
                        </div>
                    </div>
                    <div class="col wrapper">
                        <span>active</span>
                        <div class="h1 text-info">{{metrics['datasource.primary.active']}}</div>
                    </div>
                    <div class="col wrapper">
                        <span>usage</span>
                        <div class="h1 text-info">{{metrics['datasource.primary.usage']}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4" ng-if="health">
            <div class="panel">
                <div class="panel-heading no-border bg-dark Iter">
                    <span class="font-bold">Mongo</span>
                </div>
                <div class="hbox">
                    <div class="col wrapper">
                        <span>Version</span>
                        <div class="h1 text-info">
                            {{health.mongo.version}}
                        </div>
                    </div>
                    <div class="col wrapper">
                        <span>Status</span>
                        <div class="h1 text-info" ng-class="{'text-success':health.status == 'UP'}">
                            {{health.mongo.status}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel">
                <div class="panel-heading no-border bg-dark Iter">
                    <span class="font-bold">JVM MEM</span>
                </div>
                <div class="wrapper text-center">
                    <span class="chart" easypiechart options="options" percent="memPercent">
					<span class="percent" ng-bind="memPercent"></span>
                    </span>
                </div>
                <div class="hbox">
                    <div class="col wrapper">
                        <span>Free</span>
                        <div class="h1 text-info">
                            {{metrics['mem.free']/1024 | number:0}}M
                        </div>
                    </div>
                    <div class="col wrapper">
                        <span>Total</span>
                        <div class="h1 text-info">
                            {{metrics['mem']/1024 | number:0}}M
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel">
                <div class="panel-heading no-border bg-dark Iter">
                    <span class="font-bold">Heap</span>
                </div>
                <div class="wrapper text-center">
                    <span class="chart" easypiechart options="options" percent="heapPercent">
					<span class="percent" ng-bind="heapPercent"></span>
                    </span>
                </div>
                <div class="hbox">
                    <div class="col wrapper">
                        <span>USED</span>
                        <div class="h1 text-info">
                            {{metrics['heap.used']/1000 | number:0}}M
                        </div>
                    </div>
                    <div class="col wrapper">
                        <span>Total</span>
                        <div class="h1 text-info">
                            {{metrics['heap']/1000 | number:0}}M
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel">
                <div class="panel-heading no-border bg-dark Iter">
                    <span class="font-bold">数据同步</span>
                </div>
                <div class="wrapper text-center">
                    <div>考生数据</div>
                    <div class="progress m-n">
                        <div class="progress-bar progress-bar-primary" style="width: {{stuPercent}}%;">
                            {{stuPercent}}%
                        </div>
                    </div>
                </div>
                <div class="hbox text-center">
                    <div class="col wrapper-xs">
                        <span>已同步</span>
                        <div class="h3 text-info">
                            {{sync[0]}}
                        </div>
                    </div>
                    <div class="col wrapper-xs">
                        <span>Total</span>
                        <div class="h3 text-info">
                            {{sync[1]}}
                        </div>
                    </div>
                    <div class="col wrapper-xs">
                        <span>比例</span>
                        <div class="h3 text-primary">
                            {{stuPercent}}%
                        </div>
                    </div>
                </div>
                <div class="wrapper text-center">
                    <div>订单数据</div>
                    <div class="progress m-n">
                        <div class="progress-bar progress-bar-info" style="width: {{orderPercent}}%;">
                            {{orderPercent}}%
                        </div>
                    </div>
                </div>
                <div class="hbox text-center">
                    <div class="col wrapper-xs">
                        <span>已同步</span>
                        <div class="h3 text-info">
                            {{sync[2]}}
                        </div>
                    </div>
                    <div class="col wrapper-xs">
                        <span>总数</span>
                        <div class="h3 text-info">
                            {{sync[3]}}
                        </div>
                    </div>
                    <div class="col wrapper-xs">
                        <span>比例</span>
                        <div class="h3 text-primary">
                            {{orderPercent}}%
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
